<template>
	<div class="p30">
		<p>既然可以定义数据了，那就实现一个选项卡看看吧</p>
		
		<div>css 图片裁剪模式   ps:你小子在做一个很新的选项卡</div>
		
		<div class="tablefather" >
			<div class="scroll">
				<div class="contents" v-for="(item, index) in tabList" :key="item.value" 
				:class="active === index ? 'active' : ''" 
				@click="changeActive(index)"
				:id='item.value'
				>
					{{item.value}}
				</div>
			</div>
			<div  class="b-a-1 mt10">
				<img :class="tabList[active].value" style="width:100%;height: 400px;" src="@/assets/img/chinken.jpg" alt="">
			</div>
		</div>
		

		
		
	</div>
	
</template>

<script setup>
	// 这鬼玩意要用啥引入啥   除非配置插件
	import { reactive, ref } from 'vue'
	
	let tabList = reactive([
		{
			name:'默认，不保证保持原有的比例，内容拉伸填充整个内容容器。',
			value:'fill'
		},
		{
			name:'保持原有尺寸比例。内容被缩放。',
			value:'contain'
		},
		{
			name:'保持原有尺寸比例。但部分内容可能被剪切。',
			value:'cover'
		},
		{
			name:'保留原有元素内容的长度和宽度，也就是说内容不会被重置。',
			value:'none'
		},
		{
			name:'保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。',
			value:'scale-down'
		}
	])
	let active = ref(0)
	
	let	changeActive = (e)=>{
		active.value = e
	}
	
</script>

<style lang ="scss" scoped>
	
	.tablefather{
		width: 50%;
		margin: 0 auto;
		overflow: hidden;
	
		.scroll{
			width: 100%;
			border: 1px solid #ededed;
			overflow-x: scroll;
			white-space: nowrap;
			
			.contents{
				height: 50px;
				padding: 15px 30px;
				box-sizing: border-box;
				line-height: 20px;
				display: inline-block;
				color: #fff;
				background: var(--el-color-primary);
				border: 1px solid #fff;

			}
			.contents:hover{
				cursor:crosshair ;
			}

		}

		.scroll::-webkit-scrollbar {
			height:2px;
			display: block;
		}
		/* 滚动槽 */
		.scroll::-webkit-scrollbar-track {
			-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
			border-radius:10px;
		}
		/* 滚动条滑块 */
		.scroll::-webkit-scrollbar-thumb {
			border-radius:10px;
			background:rgba(0, 170, 127, 0.9);
			-webkit-box-shadow:inset006pxrgba(170, 170, 127, 0.5);
		}
		.active{
			color: #fff;
			background: var(--el-color-primary);
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			
			border-bottom-left-radius: 0px !important;
			border-bottom-right-radius: 0px  !important;
			border: 1px solid #fff;
		}
		.scale-down{
			object-fit: scale-down ;
		}	
		.none{
			object-fit: none ;
		}	
		
		.fill{
			object-fit: fill ;
		}	
		.contain{
			object-fit: contain ;
		}	
		.cover{
			object-fit: cover ;
		}
	}
	
	

</style>